<template>
  <div ref="permissionPage" class="permission_page">
    <div v-html="privacy" class="content"></div>
  </div>
</template>

<script>
  import env from '@/config/env';
  // import Hybrid from '@/components/uzone-hybrid';

  export default {
    name: 'permission',
    data() {
      return {
        apiUrl: env.apiPrefix,
        gateway: env.apiGateway,
        hasNotice: false,
        privacy: '',
      };
    },
    methods: {
      noticeBottom() {
        // 通知APP，页面已经滚动到底部，阅读完成，通知一次
        if (!this.hasNotice) {
          this.hasNotice = true;
          // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
          this.$hybrid.action('scrollBottom', {scrollBottom: true});
        }
      },
      /**
       *
       */
      getPrivacy() {
        const params = {
          systemName: 'app',
          module: 'app_setting',
          function: 'authorization_content',
          key: 'authorization_content',
          status: '0',
        };
        this.$api.getAppSettingOne(params).then(res => {
          const { status, error, data } = res;
          if ('1' === status && ('00000000' === error || '0000' === error) && data) {
            this.privacy = data.value;
            this.$nextTick(() => {
              this.listenScroll();
            });
          }
        });
      },
      listenScroll() {
        const page = this.$refs.permissionPage;
        const winHeight = window.innerHeight;
        const scrollTop = document.scrollingElement.scrollTop;
        if (scrollTop + winHeight + 20 >= page.clientHeight) {
          this.noticeBottom();
        }
        window.addEventListener('scroll', () => {
          const scrollTop = document.scrollingElement.scrollTop;
          if (scrollTop + winHeight + 20 >= page.clientHeight) {
            this.noticeBottom();
          }
        });
      },
    },
    mounted() {
      this.getPrivacy();
    }
  };
</script>

<style lang="scss">

  .permission_page {
    padding: 30px;
    line-height:36px;
    font-size:24px;
    word-wrap: break-word;
      
      .content {
        h1 {
          font-size:48px;
          font-weight: bold;
          margin: 0.28em 0;
        }
        h2 {
          font-size:36px;
          font-weight: bold;
          margin: 0.4em 0;
        }
        h3 {
          font-size:28px;
          font-weight: bold;
          margin: 0.5em 0;
        }
        h4 {
          font-size:26px;
          font-weight: bold;
          margin: 1em 0;
        }
        h5 {
          font-size:24px;
          font-weight: bold;
          margin: 1em 0;
        }
        h6 {
          font-size:18px;
          font-weight: bold;
          margin: 1em 0;
        }
        p {
          margin: 1em 0;
        }
      }
  }
</style>
